<template>
  <main>
  <p class="header tc">张三的商品</p>
  <div class="body tc" >
    <table>
      <tr v-show="isShow1">
        <th><img src="./imgs/TCL彩电.png" alt=""></th>
        <th>TLC彩电</th>
        <th><button @click="geshu1-=1;price-=1000">-</button></th>
        <th><input type="text" v-model="geshu1"></th>
        <th><button @click="geshu1 +=1;price+=1000">+</button></th>
        <th><button @click="isShow1=false">X</button></th>
      </tr>
      <tr v-show="isShow2">
        <th><img src="./imgs/机顶盒.png" alt=""></th>
        <th>机顶盒</th>
        <th><button @click="geshu2-=1;price-=300">-</button></th>
        <th><input type="text" v-model="geshu2"></th>
        <th><button @click="geshu2 +=1;price+=300">+</button></th>
        <th><button @click="isShow2=false">X</button></th>
      </tr>
      <tr v-show="isShow3">
        <th><img src="./imgs/海尔冰箱.png" alt=""></th>
        <th>海尔冰箱</th>
        <th><button @click="geshu3-=1;price-=2000">-</button></th>
        <th><input type="text" v-model="geshu3"></th>
        <th><button @click="geshu3 +=1;price+=2000">+</button></th>
        <th><button @click="isShow3=false">X</button></th>
      </tr>
      <tr v-show="isShow4">
        <th><img src="./imgs/小米手机.png" alt=""></th>
        <th>小米手机</th>
        <th><button @click="geshu4-=1;price-=2300">-</button></th>
        <th><input type="text" v-model="geshu4"></th>
        <th><button @click="geshu4 +=1;price+=2300">+</button></th>
        <th><button @click="isShow4=false">X</button></th>
      </tr>
      <tr v-show="isShow5">
        <th><img src="./imgs/PPTV电视.png" alt=""></th>
        <th>PPTV电视</th>
        <th><button @click="geshu5-=1;price-=900">-</button></th>
        <th><input type="text" v-model="geshu5"></th>
        <th><button @click="geshu5 +=1;price+=900">+</button></th>
        <th><button @click="isShow5=false">X</button></th>
      </tr>
    </table>
    </div>
  </main>
  <div class="footer tc" >总结:{{ price }}<button class="js" @click="f1()">结算</button></div>
</template>

<script setup>
import { ref } from 'vue';


let price = ref(0)
let geshu1 = ref(0);
let geshu2 = ref(0);
let geshu3 = ref(0);
let geshu4 = ref(0);
// function reduce(){
//   geshu4-=1;
//   price-=2300;
//   if(geshu4<0){
//     geshu4+=1;
//     price+=2300;
//   }
// }
let geshu5 = ref(0);
let isShow1 = ref(true)
let isShow2 = ref(true)
let isShow3= ref(true)
let isShow4= ref(true)
let isShow5= ref(true)
function f1(){
  alert('已结账')
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
main table{
  width: 100%;
}
.tc{
  width: 500px;
  text-align: center;
}

.header{
  background-color: #add8e6;
  padding: 10px;
}
button{
  border: none;
  padding: 4px;
}
.footer{
  background-color: #ffce46 ;
  padding: 10px;
}
button:hover{
  background-color: #ffce46;
}
input{
  width: 50px;
  margin: 0 -15px;
}
.js{
  float: right;
  background-color: red;
}
.js:hover{
  background-color: red;
}
</style>